<template>
	<view class="page-ai-image page-common">
		<CustomTab :list="tabs" @change="onTabChange" />
		<view class="mt-16 mb-16">
			<RadioBtnList :list="subTabs" @change="onSubChange" :current="currentSubTab"/>
		</view>
		<scroll-view :scroll-y="true" :scroll-top="scrollTop" :style="`height:calc(100vh - 32rpx - 66rpx - 32rpx - 56rpx - 32rpx - ${safeAreaInsetsBottom}px)`"
			@scrolltolower="onReachBottom" @scroll="onScroll">
			<view class="list">
				<view class="list-item" :class="{
					'ml-9' : index % 2,
					'mt-16': index > 1
				}" v-for="(item, index) in currentList" :key="index" @tap="onClickItem(item)">
					<image class="image" :src="item.modelImage" mode="widthFix"></image>
					<view class="free-icon" v-if="freeNum > 0">
						<text>免费</text>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>

		</scroll-view>
		<u-safe-bottom></u-safe-bottom>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick,
	} from "vue";
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import CustomTab from '@/sub-ai/components/tab/index.vue'
	import RadioBtnList from '@/sub-ai/components/radio-btn-list/index.vue';
	import {
		getNavHeightTop
	} from "@/stores/navStore.js";
	let navHeightInfo = getNavHeightTop();
	const currentList = ref([{
			img: '/static/other/cancel.svg',
		},
		{
			img: '/static/other/cancel.svg',
		},
		{
			img: '/static/other/cancel.svg',
		},
		{
			img: '/static/other/cancel.svg',
		},
		{
			img: '/static/other/cancel.svg',
		},
		{
			img: '/static/other/cancel.svg',
		},
		{
			img: '/static/other/cancel.svg',
		},
		{
			img: '/static/other/cancel.svg',
		},
		{
			img: '/static/other/cancel.svg',
		},
		{
			img: '/static/other/cancel.svg',
		},
		{
			img: '/static/other/cancel.svg',
		},
	]);
	const tabs = ref([{
		name: '女士',
		id: '1',
	}, {
		name: '男士',
		id: '2',
	}]);
	const subTabs = ref([]);
	const status = ref('loadmore');
	const pageNo = ref(1);
	const currentTab = ref(0);
	const currentSubTab = ref(0);
	const freeNum = ref(0);
	
	function isIOS() {
		let systemInfo = uni.getSystemInfoSync();
		console.log('systemInfo',systemInfo)
		return systemInfo.osName === 'ios';
	}
	let safeAreaInsetsBottom = 0;
	if(isIOS()) {
		const {
			safeAreaInsets
		} = uni.$u.sys()
		console.log('ios', safeAreaInsets)
		safeAreaInsetsBottom = safeAreaInsets.bottom;
	}


	const onTabChange = async (index) => {
		currentTab.value = index;
		currentSubTab.value = 0;
		await getSexList();
		await queryData();
		resetScrollTop();
	}
	const onSubChange = async (index) => {
		currentSubTab.value = index;
		await queryData();
		resetScrollTop();
	}
	const onClickItem = (item) => {
		uni.setStorageSync('ai-make-item', {...item, freeNum: freeNum.value});
		uni.navigateTo({
			url: '/sub-ai/pages/ai-image/make'
		})
	}
	const queryData = async (isLoadMore) => {
		try {
			status.value = 'loading';
			const index = currentTab.value; //当前tab在列表中索引
			const subIndex = currentSubTab.value;
			// 下一页
			const _pageNo = isLoadMore ? pageNo.value + 1 : 1;
			// 接口是分页的
			let res = await uni.$request('/api/busi/image/model/page', {
				sex: tabs.value[index].id, //1女，2男
				classId: subTabs.value[subIndex].id,
				pageNo: _pageNo,
				pageSize: 10,
			});
			pageNo.value = _pageNo;
			currentList.value = [...(isLoadMore ? currentList.value : []), ...res.data.imageModels];
			status.value = currentList.value.length === res.data.total ? 'nomore' : 'loadmore';
			freeNum.value = res.data.freeNum;
		} catch (e) {
			console.error(e);
			status.value = 'loadmore';
			uni.$u.toast('数据加载失败');
		}

	}

	const getSexList = async () => {
		const index = currentTab.value; //当前tab在列表中索引
		// 接口是分页的
		let res = await uni.$request('/api/busi/image/class/list', {
			sex: tabs.value[index].id, //1女，2男
		});
		subTabs.value = [{
			sort: '全部',
			id: '',
		}].concat(res.data.list || []).map(item => ({
			...item,
			name: item.sort,
		}));
	}

	const onReachBottom = () => {
		console.log('触底');
		if (status.value === 'nomore') return;
		queryData(true);
	};
	let oldScrollTop = 0;
	let scrollTop = ref(0);
	const onScroll = (e) => {
		oldScrollTop = e.detail.scrollTop
	};
	const resetScrollTop = () => {
		// 解决view层不同步的问题
		scrollTop.value = oldScrollTop;
		nextTick(function() {
			scrollTop.value  = 0
		});
	}
	onLoad(async () => {
		await getSexList();
		queryData();
	})
</script>

<style lang="scss" scoped>
	.page-ai-image {
		padding: 32rpx 32rpx 0 32rpx;

		.list-item {
			display: inline-block;
			box-sizing: border-box;
			width: 334rpx;
			padding: 20rpx;
			position: relative;
			line-height: 0;

			&.ml-9 {
				margin-left: 18rpx;
			}

			image {
				width: 100%;
				border-radius: 16rpx;
			}

			.free-icon {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				height: 44rpx;
				border-radius: 0 16rpx 0 16rpx;
				background: rgba(255, 195, 0, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 4rpx 16rpx;
				box-sizing: border-box;

				/** 文本 */
				font-size: 12px;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}
		}
	}
</style>